/**
 * Created by lixinkun on 2017/7/8.
 */
'use strict';
import React, {Component} from 'react';
import {
    Text,
    Image,
    ScrollView,
    View,
    RefreshControl,
    TouchableOpacity,
    ActivityIndicator,
    StyleSheet
} from 'react-native';

import WeatherTop from '../../components/WeatherTop';
import DailyForecast from '../../components/DailyForecast';
import AirQuality from '../../components/AirQuality';
import Suggestion from '../../components/Suggestion';
import px2dp from '../../utils/px2dp';
import theme from '../../constants/theme';
import * as Actions from '../../actions/requestWeatherData';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import NavigationBar from '../../components/NavigationBar';
import BackPageComponent from '../../components/BackPageComponent';

class WeatherDetail extends BackPageComponent {

    constructor(props) {
        super(props);
    }

    render() {
        const {basic, aqi,nowWeather, suggestion, daily_forecast,backgroundImage } = this.props;

        const spinner = this.props.loading ? (
            <ActivityIndicator
                style = {styles.loading}
                hidden = 'true'
                size = 'large'/>
        ) : (
            <View/>
        );

        const aqiCard = aqi ? (
            <AirQuality aqi = {aqi} />) : (<View/>)


        //搞个延时加载，有数据的时候，才去渲染界面好了
        const content = (basic !== null) ? (
            <ScrollView style={{paddingVertical: 20}}>
                <WeatherTop
                    basic = {basic}
                    nowWeather={nowWeather} />
                <DailyForecast daily_forecast = {daily_forecast}/>
                {aqiCard}
                <Suggestion suggestion = {suggestion}/>
            </ScrollView>
        ) : (
            <View/>
        );

        return(
            backgroundImage ?
                <Image
                    style={[styles.container, {backgroundColor : this.props.pageBackgroundColor}]}
                    source={{uri : this.props.backgroundImage}}>
                        <View style={styles.toolbar}>
                            <NavigationBar title='天气详情'
                                           isBtnOnLeft={true}
                                           leftBtnIcon='arrow-back'
                                           leftBtnPress={this._handleBack.bind(this)}
                            />
                        </View>
                        <View style={styles.contentContainer}>
                            {content}
                            {spinner}
                        </View>
                </Image> :
                <View style={styles.container}>

                </View>

        );

    }

    componentWillMount() {
        //先获取图片
        this.props.actions.fetchBackgroundImage();

    }

    componentDidMount() {
        this.props.actions.fetchWeatherData(this.props.weatherId);
    }

}

const styles = StyleSheet.create({
    container:{
        flex: 1,
        width: null,

    },

    toolbar: {
        position: 'absolute',
        width: theme.screenWidth,
        marginTop: theme.toolbar.paddingTop,
        zIndex: 1
    },
    contentContainer: {
        marginTop: theme.toolbar.height,
        flex: 1,
        zIndex: 0
    },


    loading: {
        flex: 1,
        marginTop: theme.screenHeight / 2 - theme.toolbar.height,

    },

});

const mapStateToProps = (state) => {
    return {
        loading: state.weatherDataState.loading,
        basic: state.weatherDataState.basic,
        nowWeather: state.weatherDataState.nowWeather,
        suggestion: state.weatherDataState.suggestion,
        aqi: state.weatherDataState.aqi,
        daily_forecast: state.weatherDataState.daily_forecast,
        backgroundImage: state.weatherDataState.backgroundImage,
        mainThemeColor: state.settingState.colorScheme.mainThemeColor,
        pageBackgroundColor: state.settingState.colorScheme.pageBackgroundColor,
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(Actions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(WeatherDetail);